<template>
  <div class="v-flow-config-section">
    <div class="config-section-title">设置抄送人</div>
    <!-- 类型 -->
    <TypeSelector v-model="ruleForm.type" :typeArr="typeArr" />
    <!-- 表单控件中的人员选择器 -->
    <div v-if="ruleForm.type === 5">
      <el-select v-model="ruleForm.userInputId" placeholder="请选择人员选择器">
        <el-option
          v-for="item in userInputList"
          :key="item.key"
          :label="item.title"
          :value="item.key"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 选择成员/角色 -->
    <ActionersConfig
      v-if="ruleForm.type === 1"
      :actioners="ruleForm.actioners"
      @update:actioners="updateActioners"
    >
      <template #btn-text>{{ ruleForm.type === 1 ? '添加成员' : '添加角色' }}</template>
    </ActionersConfig>
  </div>
</template>

<script setup lang="ts">
import { deliveryTypeArr } from '../dicts'
import type { Actioner } from '../../types'
const typeArr = ref(deliveryTypeArr)
const userInputList = ref([
  {
    key: '', // 表单项key
    title: '' // 表单项名称
  }
])
const ruleForm = ref({
  type: 1, // 审批类型
  level: 1, // 审批层级 | 连续多级上级时的最终审批级别
  endType: 2, // 审批终点类型 1指定角色 2指定层级
  userInputId: '', // 人员选择器ID
  actioners: [] as Actioner[] // 成员/角色列表
})
const updateActioners = (actioners: Actioner[]) => {
  ruleForm.value.actioners = actioners
}
</script>
